<template>
  <div class="menu-content-attribute">
    <div class="tabs">
      <a-tabs v-model:activeKey="activeKey" size="large">
        <a-tab-pane key="field" tab="属性" />
        <a-tab-pane key="relation" tab="关系" />
        <a-tab-pane key="version" tab="版本" />
      </a-tabs>
    </div>
    <div class="tabs-content">
      <attribute-field v-if="activeKey === 'field'" />
      <attribute-relation v-if="activeKey === 'relation'" />
      <attribute-version
        v-if="activeKey === 'version'"
        @update="onUpdateVersion"
        :key="keyVersion"
      />
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import AttributeField from './menu-content-attribute-field.vue'
import AttributeRelation from './menu-content-attribute-relation.vue'
import AttributeVersion from './menu-content-attribute-version.vue'
/**
 * tabs
 */
let activeKey = ref('field')
/**
 * 事件
 */
let keyVersion = ref(Math.random())
function onUpdateVersion() {
  keyVersion.value = Math.random()
}
</script>
<style scoped lang="less">
.menu-content-attribute {
  height: 100%;
  box-sizing: border-box;
  padding: 0 24px 14px 24px;
  display: flex;
  flex-direction: column;
  // .tabs {
  // }
  .tabs-content {
    flex: 1;
    overflow-y: auto;
  }
}
</style>
